<template>
    <div
        class="avatar-wrapper"
        :style="{...style()}">
        <!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
        <img
            v-if="isImage"
            style="display: none"
            :src="src"
            @error="onImgError" />
        <span v-show="!isImage">{{ userInitial }}</span>
    </div>
</template>

<script lang="js">
import { reactive, toRefs, computed } from 'vue';
import { useAvatertSetup } from '@/setup/common/AvaterSetup.js';

export default {
    name: 'Avatar',
    components: {},
    props: {
        username: {
            type: String
        },
        backgroundColor: {
            type: String

        },
        color: {
            type: String,
            default: 'white'
        },
        size: {
            type: Number,
            default: 50
        },
        rounded: {
            type: Boolean,
            default: true
        },
        lighten: {
            type: Number,
            default: 80
        }
    },
    setup (props, context) {
        const { backgroundColors, randomBackgroundColor, lightenColor } = useAvatertSetup();
        const state = reactive({
            // backgroundColors: [
            //     '#F44336', '#FF4081', '#9C27B0', '#673AB7',
            //     '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688',
            //     '#4CAF50', '#8BC34A', '#CDDC39', /* '#FFEB3B' , */ '#FFC107',
            //     '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],

            imgError: false
        });
        const initial = (username) => {
            if (!username) {
                return '';
            }
            //  const parts = username.split(/[ -]/);
            const initials = username.substr(-2, 2);

            return initials;
        };

        const background = computed(() => {
            if (!props.isImage) {
                return props.backgroundColor || randomBackgroundColor(props.username.length, backgroundColors);
            }
            return '';
        });
        const fontColor = computed(() => {
            if (!props.isImage) {
                return props.color || lightenColor(background, props.lighten);
            }
            return '';
        });
        const isImage = computed(() => {
            return !state.imgError && Boolean(props.src);
        });

        const userInitial = computed(() => {
            if (!isImage.value) {
                const initials = initial(props.username);
                return initials;
            }
            return '';
        });

        const onImgError = (evt) => {
            state.imgError = true;
        };
        const style = () => {
            const customStyle = {
                // display: props.inline ? 'inline-flex' : 'flex',
                width: `${props.size}px`,
                height: `${props.size}px`,
                borderRadius: props.rounded ? '50%' : 0,
                lineHeight: `${(props.size + Math.floor(props.size / 20))}px`,
                fontWeight: 'bold',
                alignItems: 'center',
                justifyContent: 'center',
                textAlign: 'center',
                userSelect: 'none'
            };

            const imgBackgroundAndFontStyle = {
                background: `transparent url('${props.src}') no-repeat scroll 0% 0% / ${props.size}px ${props.size}px content-box border-box`
            };

            const initialBackgroundAndFontStyle = {
                backgroundColor: background.value,
                font: `${Math.floor(props.size / 2.5)}px/${props.size}px Helvetica, Arial, sans-serif`,
                color: fontColor.value
            };

            const backgroundAndFontStyle = (isImage.value)
                ? imgBackgroundAndFontStyle
                : initialBackgroundAndFontStyle;

            Object.assign(customStyle, backgroundAndFontStyle);

            return customStyle;
        };
        return {
            userInitial,
            isImage,
            onImgError,
            style,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
</style>
